import { useEffect, useState, useRef } from 'react'
import { Avatar, MessagePlugin, Popup, Tree, TreeNodeModel, Card, Button, Comment, Row, Col, Divider } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import { ApiRequest, apis } from '@/service'
import {FolderMoveIcon, EditIcon, ThumbUpIcon } from 'tdesign-icons-react'

const {
  getUserList,
} = apis.BMService.organization

const UserTree = () => {

  const { t } = useTranslation(["bugManager"])

  // const [treeList, setTreeList] = useState<TreeType[]>([])
  const [userList, setUserList] = useState<StaffType[]>([])

  /**
   * 初始化组织架构树
   */
  const organizationPositionList: TreeListType = [
    {
      label: t("organization.chairman"),
      value: '1',
      children: []
    },
    {
      label: t("organization.generalManager"),
      value: '2',
      children: []
    },
    {
      label: t("organization.projectManager"),
      value: '3',
      children: []
    },
    {
      label: t("organization.productManager"),
      value: '4',
      children: []
    },
    {
      label: t("organization.backEndDeveloper"),
      value: '5',
      children: []
    },
    {
      label: t("organization.frontEndDeveloper"),
      value: '6',
      children: []
    },
    {
      label: t("organization.testEngineer"),
      value: '7',
      children: []
    },
    {
      label: t("organization.otherUser"),
      value: '8',
      children: []
    },
  ]

  useEffect(() => {
    queryUserListData()
  }, [])

  const getTreeList = () => {
    let _organizationPositionList = JSON.parse(JSON.stringify(organizationPositionList || '[]'))
    // 有两个思路，不显示没人数的组织，显示没人数的组织 要不别用树了，可以用，没啥问题 这里字典是数字，导致有问题，最好不用数字哪里不用数字
    // 用第二个 这里组织架构来遍历第一次，用户遍历第二次
    for (let treeIndex = 0; treeIndex < organizationPositionList.length; treeIndex++) {
      for (let userIndex = 0; userIndex < userList.length; userIndex++) {
        if (organizationPositionList[treeIndex].value === userList[userIndex].position.value) {
          _organizationPositionList[treeIndex]["children"].push({
            label: userList[userIndex].name,
            avatar: userList[userIndex].avatar,
            slogan: userList[userIndex].slogan,
          })
        }
      }
    }
    return _organizationPositionList
  }

  const treeList = getTreeList()

  /**
   * 查询用户数据 列表
   */
  const queryUserListData = () => {
    const params = {}
    ApiRequest({ api: getUserList, params }).then((res: ResponseDataType) => {
      const { code = -1, data = [], note = '', total = 0 } = res
      if (code > 0) {
        setUserList(data)
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  const renderLine: any = (node: TreeNodeModel): ReactNode => {
    const {avatar} = node.data
    return node.getLevel() == 1 ?
      <Popup
        // ref={currentPopupRef}
        content={createCard(node.data)}
        // content={}
        trigger="hover"
        placement="right-top" // 咋消失啊 两个思路，一个是看看有没有让他消失的方法，一个是改变触发方法
        // overlayInnerClassName={'user-slogan-popup-overlay-inner'} // 这里添加类名，然后修改类下面的
        // onVisibleChange={onPopupVisibleChange}
        showArrow
        destroyOnClose
      >
        <Avatar
          image={avatar ? avatar : "https://tdesign.gtimg.com/site/avatar.jpg"}
          shape="circle"
        />
      </Popup> : null
  }

  const createCard = (data: any): ReactNode => {
    const { label, avatar, slogan } = data
    return <Card
      bordered
      theme="poster2"
      cover={avatar ? avatar : "https://tdesign.gtimg.com/site/avatar.jpg"}
      style={{ width: '400px' }}
      header={
        <Comment author={label} content={slogan} avatar={avatar ? avatar : "https://tdesign.gtimg.com/site/avatar.jpg"} ></Comment>
      }
      footer={
        <Row align="middle" justify="center">
        <Col flex="auto">
          <Button variant="text">
            <ThumbUpIcon></ThumbUpIcon>
          </Button>
        </Col>
        <Divider layout="vertical"></Divider>
        <Col flex="auto">
          <Button variant="text">
            <FolderMoveIcon></FolderMoveIcon>
          </Button>
        </Col>
        <Divider layout="vertical"></Divider>
        <Col flex="auto">
          <Button variant="text">
            <EditIcon></EditIcon>
          </Button>
        </Col>
      </Row>
      }
    ></Card>
  }

  return <div className={'content-wrapper'}>
    <Tree
      data={treeList}
      line={renderLine}
      expandAll
      activable
      hover
      transition
    />
  </div>

}

export default UserTree